﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "CommonDefect";
    Layout = null;
}
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Demo</title>
        <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
        <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
        <link href="~/libs/layui-v2.5.6/layui/css/layui.mobile.css" rel="stylesheet" />
    </head>
    <body>
        <div class="div1">
            <form class="layui-form layui-row layui-col-space16" style="margin-bottom:8px;margin-top:6px">
                <div class="layui-inline div2">
                    <div class="layui-form-item" style="margin-bottom: 0;">
                        <label class="layui-form-label"><b class="b1">缺陷描述</b></label>
                        <div class="layui-input-block">
                            <input type="text" id="InquireInfo" placeholder="请输入缺陷描述" class="layui-input layui-input-sm" style="width:200px">
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" onclick="layuiTable()">
                        <i class="layui-icon  layui-icon-search"></i>
                        搜索
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border" onclick="layuirefresh()">
                        <i class="layui-icon   layui-icon-refresh"></i>
                        重置
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" onclick="AddPopLayers()">
                        <i class="layui-icon  layui-icon-add-1"></i>
                        新增
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" onclick="deleteCheck(0)">
                        <i class="layui-icon  layui-icon-delete"></i>
                        删除
                    </button>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="tabledata" lay-filter="tabledata"></table>
        <div id="laypage" class="div7"></div>

        <script type="text/html" id="toolDemo">
            <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue" lay-event="update">
                    <i class="layui-icon  layui-icon-edit"></i>
                    编辑
                </a>
                <a class="layui-btn layui-btn-xs layui-btn-primary layui-border-red" lay-event="delete" >
                    <i class="layui-icon  layui-icon-delete"></i>
                    删除
                </a>
            </div>
        </script>

        <div id="PopLayers" class="div3">
            <form id="ProcedureSettingform" lay-filter="ProcedureSettingform" class="layui-form layui-row layui-col-space16 layui-form-pane form1">
                <div class="layui-inline layui-form-text textarea1">
                    <div class="layui-form-item" style="margin-bottom: 0;">
                        <label class="layui-form-label textarea1"><b>缺陷描述</b></label>
                        <div class="layui-input-block">
                            <textarea name="DefectDescription" placeholder="请输入缺陷描述" lay-verify="required" class="layui-textarea textarea1"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-inline div4">
                    <div class="layui-form-item" style="margin-bottom: 0;">
                        <label class="layui-form-label label1"><b>检测项类型</b></label>
                        <div class="layui-input-block">
                            <select name="DetectionItemType" lay-filter="aihao" lay-verify="required">
                                <option value="尺寸">尺寸</option>
                                <option value="外观">外观</option>
                                <option value="重量">重量</option>
                                <option value="性能">性能</option>
                                <option value="成分">成分</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline div4">
                    <div class="layui-form-item" style="margin-bottom: 0;">
                        <label class="layui-form-label label1"><b>缺陷等级</b></label>
                        <div class="layui-input-block">
                            <select name="DefectGradeA" lay-filter="aihao" lay-verify="required">
                                <option value="致命缺陷">致命缺陷</option>
                                <option value="致命缺陷">致命缺陷</option>
                                <option value="轻微缺陷">轻微缺陷</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" style="float:right">
                    <input type="text" name="Id" hidden>
                    <button class="layui-btn" lay-submit lay-filter="demo2" onclick="Confirm()">确认</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>

        <script src="~/libs/jquery/jquery.js"></script>
        @*<script src="~/Scripts/layui-v2.5.6/layui/lay/modules/leftmenu.js"></script>*@
        <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
        <script>
            //全局变量
            var VendorInfo={};
            var index={};
            var list = [];
            var rowCount = 0;
            var pageCount = 0;
            var pageIndex = 1;
            var pageSize = 10;
            var tableStatusdata=[];

            //Layui
            var table = layui.table;
            var laypage = layui.laypage;
            var layer = layui.layer;
            var form = layui.form;

            //Layui页面渲染事件
            layui.use(function(){
                layuiTable();
                //显示点击行事件
                table.on('tool(tabledata)', function(obj){
                    
                    if(obj.event=='delete'){
                        tableStatusdata=[];
                        tableStatusdata.push(obj.data)
                        deleteCheck(1);
                    }
                    if(obj.event=='update'){
                        UpdatePopLayers(obj.data)
                    }
                })
            })

            //查询信息重置
            function layuirefresh () {
                $("#InquireInfo").val("");
            }

            //打开添加弹出框事件
            function AddPopLayers() {
                //清空表单
                form.val('ProcedureSettingform',{
                    'Id':'0',
                    'DefectDescription':'',
                    'DetectionItemType':'',
                    'DefectGradeA':'',
                })
                //打开弹出层
                index=layer.open({
                    type: 1,
                    shade: false, // 不显示遮罩
                    title:['添加常见缺陷项目', 'text-align:center;font-size:25px'],
                    offset: '10px',
                    content: $('#PopLayers'), // 捕获的元素
                    area: ['1389px', '515px'], //宽高
                    end: function(){
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            }
            //确认事件
            function Confirm () {
                $("[name='Id']").val()=='0'?AddCheck():UpdateCheck()
            }

            //添加事件
            function AddCheck() {
                // 监听提交事件
                form.on('submit(demo2)', function(data){
                    return false; // 阻止表单跳转
                })
                var Id=$("[name='Id']").val()
                var DefectDescription=$("[name='DefectDescription']").val();
                var DetectionItemType=$("[name='DetectionItemType']").val();
                var DefectGradeA=$("[name='DefectGradeA']").val();
                $.ajax({
                    url: "/CommonDefect/Insert",
                    type: "post",
                    async: false,
                    datatype: "json",
                    data:{Id,DetectionItemType,DefectDescription,DefectGradeA},
                    success: function (res) {
                        if(res==1){
                            console.log(res);
                            layer.msg('添加成功', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                            layuiTable();
                            layer.close(index);
                        }
                        if(res==0){
                            layer.msg('添加失败', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                        }
                    }
                })
            }

            //显示常见缺陷信息
            function layuiTable() {
                var InquireInfo=$("#InquireInfo").val()
                $.ajax({
                    url: "/CommonDefect/PageList",
                    type: "get",
                    async: false,
                    datatype: "json",
                    data:{
                        inquireInfo:InquireInfo,
                        pageIndex:pageIndex,
                        pageSize:pageSize,
                    },
                    success:function (res) {
                        list =res.queryable;
                        rowCount=res.rowCount;
                        pageCount=res.pageCount;
                    }
                })
                //显示表格
                table.render({
                    elem: '#tabledata',
                    id: 'id', // 自定义 id 索引
                    height: '745px',
                    cols: [[ //标题栏
                          {checkbox: true, fixed: true},
                          {field: 'defectDescription', title: '缺陷描述'},
                          {field: 'detectionItemType', title: '检测项类型'},
                          {field: 'defectGradeA', title: '缺陷等级'},
                          {fixed: 'right', title:'操作', templet: '#toolDemo',width: 140},
                    ]],
                    data:list,
                    //skin: 'line', // 表格风格
                    even: true,
                    //page: true, // 是否显示分页
                    //limits: [5, 10, 15],
                    //limit: 5 // 每页默认显示的数量
                });

                // 完整显示分页
                laypage.render({
                    elem: 'laypage', // 元素 id
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                    count: rowCount, // 数据总数
                    limit: pageSize,
                    curr:pageIndex,
                    limits:[10,20,30],
                    jump: function(obj){
                        if(pageIndex!=obj.curr||pageSize!=obj.limit){
                            pageIndex=obj.curr;
                            pageSize=obj.limit;
                            layuiTable();
                        }
                    }
                });
            }

            //点击确认事件
            function clickRows(){
               var tableStatus = table.checkStatus('id');
               tableStatusdata=tableStatus.data // 选中行的数据
            }

            //删除常见缺陷信息
            function deleteCheck (i) {
                index=layer.confirm('是否确定删除？', {
                    title: false,
                    area: ['100px', '125px'],
                    btn: ['确定', '取消'], //按钮
                    offset: '16px',
                    btnAlign: 'c' //按钮水平居中对齐
                },
                function(){
                    if(i==0){
                        clickRows();
                    }
                    if(tableStatusdata.length==0){
                        layer.msg('至少选择一项', {
                            time: 2000, // 2s 后自动关闭
                            offset: '16px'
                        });
                        return;
                    }
                    var id=tableStatusdata.map(x=>x.id);
                    layer.close(index);
                    $.ajax({
                        url: "/CommonDefect/Deleted",
                        type: "post",
                        async: false,
                        datatype: "json",
                        data:{id:id.toString()},
                        success: function (res) {
                            if(res==1){
                                layer.msg('删除成功', {
                                    time: 1000, // 1s 后自动关闭
                                    offset: '16px'
                                });
                                layuiTable();
                            }
                            else{
                                layer.msg('删除失败', {
                                    time: 1000, // 1s 后自动关闭
                                    offset: '16px'
                                });
                            }
                        }
                    })
                },
                function(){
                    layer.msg('取消成功', {
                        time: 5000, // 5s 后自动关闭
                        offset: '16px'
                    });
                })
            }

            //打开编辑弹出框事件
            function UpdatePopLayers(data) {
                console.log(data)
                //清空表单
                form.val('ProcedureSettingform',{
                    'Id':data.id,
                    'DefectDescription':data.defectDescription,
                    'DetectionItemType':data.detectionItemType,
                    'DefectGradeA':data.defectGradeA,
                })
                //打开弹出层
                index=layer.open({
                    type: 1,
                    shade: false, // 不显示遮罩
                    title:['编辑常见缺陷项目', 'text-align:center;font-size:25px'],
                    offset: '10px',
                    content: $('#PopLayers'), // 捕获的元素
                    area: ['1389px', '515px'], //宽高
                    end: function(){
                        // layer.msg('关闭后的回调', {icon:6});
                    }
                });
            }

            //编辑常见缺陷信息
            function UpdateCheck() {
                // 监听提交事件
                form.on('submit(demo2)', function(data){
                    return false; // 阻止表单跳转
                })
                var Id=$("[name='Id']").val()
                var DefectDescription=$("[name='DefectDescription']").val();
                var DetectionItemType=$("[name='DetectionItemType']").val();
                var DefectGradeA=$("[name='DefectGradeA']").val();
                $.ajax({
                    url: "/CommonDefect/Update",
                    type: "post",
                    async: false,
                    datatype: "json",
                    data:{Id,DetectionItemType,DefectDescription,DefectGradeA},
                    success: function (res) {
                        if(res==1){
                            layer.msg('编辑成功', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                            layuiTable();
                            layer.close(index);
                        }
                        if(res==0){
                            layer.msg('编辑失败', {
                                time: 5000, // 5s 后自动关闭
                                offset: '16px'
                            });
                        }
                    }
                })
            }
        </script>
        <style>
            .div2 {
                width: 340px;
            }

            .b1 {
                font-size: 16px;
            }

            .div3 {
                display: none;
                width: 1389px;
            }

            .form1 {
                margin: 15px;
            }

            .div4 {
                width: 661px;
            }

            .label1 {
                width: 125px
            }

            .input1 {
                width: 204px
            }
            .input2 {
                width: 553px;
            }

            .textarea1 {
                width: 1343px;
            }

            .div7 {
                margin-left: 15px;
                margin-top: 5px;
            }
        </style>
    </body>
</html>
